import React,{useEffect,useState,useMemo} from 'react'
import { NavBar } from 'antd-mobile'
import { Sticky } from 'react-vant'
import axios from 'axios'
import './style/hot.scss'
import Book from './Book'

export default function Hot() {
  let [books,setBooks]=useState([])
  const back = () => {
    window.history.back();
  }
  useEffect(() => {
    getTest()
  }, [])
  let getTest = async () => {
    let res = await axios.get('http://localhost:3000/zjj/hot')
    if (res.data.code === 200) {
      setBooks(res.data.books)
      console.log(res.data.books);
    }
  }
  let bookls=useMemo(() => {
    if (books.length > 3) {
      return books.slice(3,10)
    } else {
      return []
    }
  }, [books])
  let t1=useMemo(() => {
    if (books.length > 3) {
      return books[0]
    } else {
      return {}
    }
  }, [books])
  let t2=useMemo(() => {
    if (books.length > 3) {
      return books[1]
    } else {
      return {}
    }
  }, [books])
  let t3=useMemo(() => {
    if (books.length > 3) {
      return books[2]
    } else {
      return {}
    }
  },[books])
  return (
    <div className='hot'>
      <Sticky>
        <NavBar onBack={back} style={{
          borderBottom: '1px solid gainsboro', padding: '10px',
          fontSize: '20px', color: 'white', fontWeight: '600',
          backgroundColor: '#CCCCFF', borderBottomLeftRadius: '50%',
          borderBottomRightRadius: '50%'
        }}>热销榜单</NavBar>
      </Sticky>
      <div className='main'>
        {bookls.length>0?<div className='top'>
          <div className='second'>
            <img src={t2.image} alt=''></img>
            <div className='title'>{t2.name}</div>
            <p><span>NO.2</span></p>
          </div>
          <div className='first'>
            <img src={t1.image} alt=''></img>
            <div className='title'>{t1.name}</div>
            <p><span>NO.1</span></p>
          </div>
          <div className='third'>
            <img src={t1.image} alt=''></img>
            <div className='title'>{t3.name}</div>
            <p><span>NO.3</span></p>
          </div>
        </div>:''}
        <div className='books'>
          {
           bookls.map((ele, i) => {
              return (
                <Book data={ele} index={i+4} key={ele._id}  />
              )
            })
          }
        </div>
      </div>
    </div>
  )
}
